<%--
  Created by IntelliJ IDEA.
  User: Dhy
  Date: 2023/9/4
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
<%--    自定义样式--%>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url("./img/3.jpg") no-repeat;
        }

        form {
            width: 400px;
            margin: 150px auto;
            padding: 50px 10px;
            border: 1px solid black;
            border-radius: 10px;
            background-color: white;

        }

        form h1 {
            text-align: center;
        }

        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }
        .verify1{
            margin-right: 180px;
            margin-top: 10px;
        }
        .verify1{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<%--   action="/login" ：form表单的数据提交到 /login --%>
<form class="layui-form" action="/login" method="post">
    <h1>欢迎使用在线教育管理系统</h1>
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" id="name" value="" lay-verify="required" placeholder="用户名"
                       lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" id="password" value="" lay-verify="required" placeholder="密   码"
                       lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                <button onclick="validateName()" class="verify1" >验证用户名</button>
                <button onclick="validatePassword()" class="verify2">验证密码</button>
            </div>
        </div>


<%--验证码--%>
        <div class="layui-form-item">
            <div class="layui-row">
                <%--                验证码输入框--%>
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <%--    验证码图片--%>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <img src="${pageContext.request.contextPath}/vercode" onclick="this.src='${pageContext.request.contextPath}/vercode?t='+ new Date().getTime();">
                    </div>
                </div>
            </div>
        </div>

<%--        <input type="checkbox" id="rememberMe" name="rememberMe">--%>
<%--        <label for="rememberMe">记住密码</label><br>--%>

<%--登录按钮--%>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>


        <p style = 'color:green'>${msg}</p>


    </div>
</form>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="./layui/layui.js"></script>
<script>

    function validateName() {
        var emailInput = document.getElementById("name");
        var email = emailInput.value;

        // 定义邮箱地址的正则表达式
        var emailRegex = /^[a-z]+$/;

        if (emailRegex.test(email)) {
            alert("用户名格式正确！");
            event.preventDefault(); // 阻止表单的默认提交行为
        } else {
            alert("用户名不正确！");
        }
    }
    function validatePassword() {
        var emailInput = document.getElementById("password");
        var email = emailInput.value;

        // 定义邮箱地址的正则表达式
        var emailRegex = /^[a-z]+$/;

        if (emailRegex.test(email)) {
            alert("密码格式正确！");
            event.preventDefault(); // 阻止表单的默认提交行为
        } else {
            alert("密码格式不正确！");
        }
    }

    //记住密码
    // document.addEventListener('DOMContentLoaded', function() {
    //     // 如果localStorage中存储了用户名和密码，则将其填充到表单字段中
    //     if (localStorage.getItem('username') && localStorage.getItem('password')) {
    //         document.getElementById('name').value = localStorage.getItem('username');
    //         document.getElementById('password').value = localStorage.getItem('password');
    //         document.getElementById('rememberMe').checked = true;
    //     }
    //
    //     // 监听表单提交事件
    //     document.getElementById('loginForm').addEventListener('submit', function(event) {
    //         event.preventDefault(); // 阻止表单默认提交行为
    //
    //         var username = document.getElementById('name').value;
    //         var password = document.getElementById('password').value;
    //         var rememberMe = document.getElementById('rememberMe').checked;
    //
    //         // 根据是否勾选记住密码来保存用户名和密码
    //         if (rememberMe) {
    //             localStorage.setItem('username', username);
    //             localStorage.setItem('password', password);
    //         } else {
    //             localStorage.removeItem('username');
    //             localStorage.removeItem('password');
    //         }
    //
    //
    //     });
    // });

    //登录
    function loginSubmit(){
        console.log("执行了js中的方法");
        //将账号名和密码存入Cookie中
        const userName = $("#username").val();
        $.cookie('loginName', userName);
        const password = $("#password").val();
        $.cookie('loginPwd', password);
        //阻断form表单提交，测试时使用
        //return false;
        $("#loginForm").submit();
    }

</script>
</body>
</html>
